﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格选择-tableselect</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.demo{
				margin-bottom:25px;
			}
			.demo table {
				width:100%;
				margin-bottom: 20px;
				table-layout:fixed;
				border-collapse: collapse;
				border-spacing: 0;
			}
			.demo table th,.demo table td {
				border: 1px solid #cee1ee;
				word-break: break-all;
				word-wrap: break-word;
				padding:4px 10px;
				line-height: 20px;
				text-align: center;
				font-weight: normal;
			}
			.demo table td.selecting{
				background-color: #fdf1dd;
			}
			.demo table td.selected{
				background-color: #fc9000;
			}
			.demo table td.disabled{
				background-color: #f5f5f5;
			}
			.demo table th, .demo table td.th{
				background-color: #e3eef8;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.tableselect.js?v=20230418"></script>
	</head>
	<body>
		<div class="header">
			<div class="inner">
				<div class="mod-head">
					<div class="bd">
						<a class="btn" href="https://github.com/mumuy/widget" rel="nofollow" target="_blank" title="Github">
							<svg aria-hidden="true" class="octicon" height="20" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
							<span>Github</span>
						</a>
						<a class="btn" href="https://passer-by.com/" target="_blank">个人网站</a>
                        <a class="btn" href="/">返回首页</a>
					</div>
				</div>
			</div>
		</div>
        <div class="container">
			<div class="demo">
				<table id="demo1">
					<thead>
						<tr>
							<th width="15%">&nbsp;</th>
							<th>房间1</th>
							<th>房间2</th>
							<th>房间3</th>
							<th>房间4</th>
							<th>房间5</th>
							<th>房间6</th>
							<th>房间7</th>
							<th>房间8</th>
							<th>房间9</th>
							<th>房间10</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="th disabled"><span>8:00-9:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>9:00-10:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td colspan="3"></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>10:00-11:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>11:00-12:00</span></td>
							<td></td>
							<td></td>
							<td rowspan="2"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>12:00-13:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="disabled"></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>13:00-14:00</span></td>
							<td></td>
							<td></td>
							<td><span>内容测试</span></td>
							<td></td>
							<td rowspan="3" colspan="2"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>14:00-15:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>15:00-16:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>16:00-17:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>17:00-18:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<p>
					<button id="mergeCells">合并单元格</button>
					<button id="splitCells">拆分单元格</button>
				</p>
			</div>
			<div class="code">
<pre>
	$("table#demo1").tableselect(function(api){
		$('#mergeCells').on('click',function(){
			var range = api.getSelectedRange();
			if(range){
				api.mergeCells(range,function($item){
					$item.removeClass('selected');
				});
			}
		});
		$('#splitCells').on('click',function(){
			var range = api.getSelectedRange();
			if(range){
				api.splitCells(range,function($item){
					$item.removeClass('selected');
				});
			}
		});
	});
</pre>
			</div>
			<script type="text/javascript">
				$("table#demo1").tableselect(function(api){
					$('#mergeCells').on('click',function(){
						var range = api.getSelectedRange();
						if(range){
							api.mergeCells(range,function($item){
								$item.removeClass('selected');
							});
						}
					});
					$('#splitCells').on('click',function(){
						var range = api.getSelectedRange();
						if(range){
							api.splitCells(range,function($item){
								$item.removeClass('selected');
							});
						}
					});
				});
			</script>

			<div class="demo">
				<table id="demo2">
					<thead>
						<tr>
							<th width="15%">&nbsp;</th>
							<th colspan="2">场地1</th>
							<th colspan="2">场地2</th>
							<th colspan="2">场地3</th>
							<th colspan="2">场地4</th>
							<th colspan="2">场地5</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="th disabled"><span>8:00-9:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>9:00-10:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>10:00-11:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>11:00-12:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>12:00-13:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="disabled"></td>
							<td class="disabled"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>13:00-14:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="disabled"></td>
							<td class="disabled"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>14:00-15:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>15:00-16:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>16:00-17:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="th disabled"><span>17:00-18:00</span></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				
			</div>
			<p>限制选择范围，每2列可选</p>
			<div class="code">
<pre>
	$("table#demo2").tableselect({
		'onSelecting':function(range){
			var limit_count = 2;
			var index = Math.ceil(range['from'][0]/limit_count);
			if(range['from'][0]<=range['to'][0]){
				range['to'][0] = Math.min(range['to'][0],index*limit_count);
			}else{
				range['to'][0] = Math.max(range['to'][0],index*limit_count-1);
			}
			return range;
		}
	});
</pre>
			</div>
<script type="text/javascript">
	$("table#demo2").tableselect({
		'onSelecting':function(range){
			var limit_count = 2;
			var index = Math.ceil(range['from'][0]/limit_count);
			if(range['from'][0]<=range['to'][0]){
				range['to'][0] = Math.min(range['to'][0],index*limit_count);
			}else{
				range['to'][0] = Math.max(range['to'][0],index*limit_count-1);
			}
			return range;
		}
	});
</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).tableselect(options,callback(api));</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>disabledCls</td>
							<td>'disabled'</td>
							<td>不可选中的class</td>
						</tr>
						<tr>
							<td>selectedCls</td>
							<td>'selected'</td>
							<td>已选择的class</td>
						</tr>
						<tr>
							<td>selectingCls</td>
							<td>'selecting'</td>
							<td>正在选择的class</td>
						</tr>
						<tr>
							<td>direction</td>
							<td>'default'</td>
							<td>选择方向。default:横纵皆可;row:横;col:纵;</td>
						</tr>
						<tr>
							<td>onSelectStart(range)</td>
							<td>
								function(range){
								}
							</td>
							<td>选中范围前</td>
						</tr>
						<tr>
							<td>onSelectEnd(range)</td>
							<td>
								function(range){
								}
							</td>
							<td>选中范围后</td>
						</tr>
						<tr>
							<td>onSelecting(range)</td>
							<td>
								function(range){
								}
							</td>
							<td>移动选择范围时，返回指定范围可限制用户选择</td>
						</tr>
					</tbody>
				</table>
				<h2>callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th width="200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>getSelectedCells()</td>
							<td>获取当前已选择单元格</td>
						</tr>
						<tr>
							<td>getSelectedRange()</td>
							<td>获取当前已选择范围</td>
						</tr>
						<tr>
							<td>mergeCells(range,callback)</td>
							<td>合并单元格</td>
						</tr>
						<tr>
							<td>splitCells(range,callback)</td>
							<td>拆分单元格</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
		<script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?134d31aed1aec463afbaa9e0bec45001";
			  var s = document.getElementsByTagName("script")[0];
			  s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</body>
<html>
